<template>
	<uv-popup :safeAreaInsetBottom="false" ref="popup" mode="center" round="12" @maskClick="maskClick">
		<view class="popup-box ss-flex-1 ss-flex-col ss-col-center ss-p-y-40 ss-p-x-24">
			<view class="ss-font-32 font-w-500">您还未登录</view>
			<view class="ss-m-t-40 ss-font-28 font-color-dark6">请先登录在进行操作</view>
			<view class="ss-flex ss-gap-32 ss-m-t-40 ss-w-100">
				<z-button @tap="maskClick" class="ss-w-100" plan borderColorMain>暂不登录</z-button>
				<button @tap="loginBtn" class="ss-reset-button login-btn">立即登录</button>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import sheep from "@/sheep"
	const popup = ref()
	const modalStore = sheep.$store('modal');
	import { loginShowModal } from '@/sheep/hooks/useModal';
	// 授权弹窗类型
	const isLoginShow = computed(() => modalStore.isLoginShow);
	watch(isLoginShow,(value) => {
		if(value) popup.value.open()
		else popup.value.close()
	})
	function maskClick(){
		loginShowModal(false)
	}
	function loginBtn(){
		maskClick()
		sheep.$router.go('/pages/login/login')
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.login-btn {
			width: 100%;
			height: 88rpx;
			background: $main-color;
			border-radius: 20rpx;
			color: #FFFFFF;
		}
	}
</style>